<template>
  <el-container class="container">
    <el-aside class="aside" width="200px">
      <!-- :default-active="$route.path" 解决了刷新页面不想显示当前激活样式问题 -->
      <el-menu
        :default-active="route.path"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
        style="margin-top: 20px"
      >
        <el-menu-item index="/index">
          <template #title>
            <span>首页</span>
          </template>
        </el-menu-item>
        <el-sub-menu v-for="first in MenuInfoList" :index="first.PATH">
          <template #title>
            <span>{{ first.NAME }}</span>
          </template>
          <el-menu-item v-for="second in first.children" :index="second.PATH"><span>{{ second.NAME }}</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
      <el-button
        @click="logout()"
        type="primary"
        round
        class="logout-button"
      >退出登录
      </el-button
      >
    </el-aside>
    <el-container>
      <el-header class="bread">
        <el-card>
          <el-breadcrumb separator=">" style="margin-left: 1%;">
            <el-breadcrumb-item v-for="(item) in breadCrumbList">{{ item.meta.breadcrumbKey }}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-card>
      </el-header>
      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { useRoute, useRouter } from 'vue-router';
import { nextTick, onBeforeMount, onMounted, reactive, ref, toRefs, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { get } from '@/api/https';
import store from '@/store';
import { flatten } from '@/utils';

export default {
  name: 'MenuView',
  setup() {
    const Router = useRouter();
    const route = useRoute();
    const breadCrumbList = ref([]);
    const data = reactive({
      MenuInfoList: []
    });

    function initBreadCrumbList() {
      breadCrumbList.value = route.matched;
    }

    watch(route, () => {
      initBreadCrumbList();
    }, {
      deep: true,
      immediate: true
    });

    const menu_function = async () => {
      const response = await get('/user/get-menu-by-username/', {
        username: localStorage.getItem('user'),
        isGetRole: false
      });
      if (response.code == 200) {
        data.MenuInfoList = response.data;
        store.state.Permissions = flatten(response.data)
          .filter((item) => item.MENU_TYPE == 3)
          .map(item => item.PERMS);
      } else {
        ElMessage({
          type: 'error',
          message: response.data.message
        });
      }
    };

    onBeforeMount(async () => {
      await menu_function();
    });

    function logout() {
      ElMessageBox.confirm('是否退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          ElMessage({
            message: '退出成功',
            type: 'success',
            grouping: true,
          });
          localStorage.removeItem('user');
          localStorage.removeItem('token');
          Router.push({ path: '/' });
        })
        .catch(() => {
          ElMessage({
            message: '已取消退出',
            type: 'info',
            grouping: true,
          });
        });
    }

    return {
      ...toRefs(data),
      logout,
      route,
      breadCrumbList
    };
  },
};
</script>

<style scoped>
.main {
  height: 90%;
  overflow: hidden;
}

.bread {
  width: 100%;
  height: 6%;
  overflow: hidden;
  margin-top: 1%;
}
</style>
